<template>
    <div id="body">
        <el-card id="tableCrad">
            <div slot="header" class="clearfix">
                <span>医生管理</span>
            </div>
            <el-row id="btnRow" type="flex" style="width: 100%">
                <el-col :span="20">
                    <el-row type="flex">
                        <el-tooltip content="医生名称" placement="top" effect="light">
                            <el-input class="input" v-model="name" placeholder="请输入医生名称" clearable
                                style="margin-right: 10px; width: 48%"></el-input>
                        </el-tooltip>
                        <el-tooltip content="数据状态" placement="top" effect="light">
                            <el-select v-model="deleted" @change="getPages" placeholder="数据状态"
                                style="margin-right: 10px; width: 48%">
                                <el-option label="全部" :value="-1"></el-option>
                                <el-option label="可用" :value="0"></el-option>
                                <el-option label="禁用" :value="1"></el-option>
                            </el-select>
                        </el-tooltip>
                        <el-button @click="getPages" icon="el-icon-search" circle></el-button>
                    </el-row>
                </el-col>
                <el-col :span="2" :offset="2">
                    <el-row>
                        <el-button @click="addOpen" type="primary" icon="el-icon-plus" circle></el-button>
                        <el-button @click="deleteBatch" type="danger" icon="el-icon-delete" circle></el-button>
                    </el-row>
                </el-col>
            </el-row>
            <el-table ref="multipleTable" :data="tableData" style="width: 100%" :height="tableHeight">
                <el-table-column fixed prop="id" label="ID" width="80" v-if="false">
                </el-table-column>
                <el-table-column type="expand" fixed="left">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="uid">
                                <span>{{props.row.uid == null ? "无" : props.row.uid}}</span>
                            </el-form-item>
                            <el-form-item label="编号">
                                <span>{{isStrEmpty(props.row.code) ? "无" : props.row.code}}</span>
                            </el-form-item>
                            <el-form-item label="机构编号">
                                <span>{{isStrEmpty(props.row.entCode) ? "无" : props.row.entCode}}</span>
                            </el-form-item>
                            <el-form-item label="照片" v-if="!isStrEmpty(props.row.photos)">
                                <img :src="baseURL + props.row.photos" width="50" height="50" />
                            </el-form-item>
                            <el-form-item label="签名" v-if="!isStrEmpty(props.row.sign)">
                                <img :src="baseURL + props.row.sign" width="50" height="50" />
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="160"></el-table-column>
                <el-table-column prop="phone" label="电话" width="160"></el-table-column>
                <el-table-column prop="rank" label="级别" width="160">
                    <template slot-scope="scope">
                        <span>{{ isStrEmpty(scope.row.rank) ? "无" : scope.row.rank }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="expert" label="擅长" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{ isStrEmpty(scope.row.expert) ? "无" : scope.row.expert }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="experience" label="经验" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{ isStrEmpty(scope.row.experience) ? "无" : scope.row.experience }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="deleted" label="状态" width="80">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.deleted === 0 ? 'success' : 'danger'" disable-transitions>{{
                            scope.row.deleted === 0 ? "可用" : "禁用" }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center" width="150">
                    <template slot-scope="scope">
                        <el-button @click.native.prevent="editOpen(scope.row)" type="text" size="small">
                            编辑
                        </el-button>
                        <el-button @click.native.prevent="deleteRow(scope.row)" type="text" style="color: red"
                            size="small">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination id="pageDevice" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="paginationData.currentPage" :page-sizes="[10, 20, 50]"
                :page-size="paginationData.pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="paginationData.total">
            </el-pagination>
        </el-card>
        <!-- 编辑弹窗开始 -->
        <el-dialog title="编辑" :visible.sync="editDialogVisible" width="30%" :before-close="editClose"
            v-loading="loading">
            <el-form ref="editForm" :rules="rules" :model="row" label-width="80px">
                <el-form-item label="ID" prop="id">
                    <el-input type="text" disabled v-model="row.id"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input type="text" placeholder="请输入姓名" v-model="row.name"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input type="text" placeholder="请输入电话" v-model="row.phone"></el-input>
                </el-form-item>
                <el-form-item label="级别" prop="rank">
                    <el-input type="text" placeholder="请输入级别" v-model="row.rank"></el-input>
                </el-form-item>
                <el-form-item label="擅长" prop="expert">
                    <el-input type="textarea" v-model="row.expert" placeholder="请输入擅长内容"></el-input>
                </el-form-item>
                <el-form-item label="经验" prop="experience">
                    <el-input type="textarea" v-model="row.experience" placeholder="请输入擅长内容"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="deleted">
                    <el-select v-model="row.deleted" placeholder="请选择用户状态">
                        <el-option label="可用" :value="0"></el-option>
                        <el-option label="禁用" :value="1"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editClose">取 消</el-button>
                <el-button type="primary" @click="editConfirm">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 编辑弹窗结束 -->
        <!-- 增加弹窗开始 -->
        <el-dialog title="增加" :visible.sync="addDialogVisible" width="30%" :before-close="addClose" v-loading="loading">
            <el-form ref="addForm" :rules="rules" :model="row" label-width="80px">
                <el-form-item label="姓名" prop="name">
                    <el-input type="text" placeholder="请输入姓名" v-model="row.name"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input type="text" placeholder="请输入电话" v-model="row.phone"></el-input>
                </el-form-item>
                <el-form-item label="级别" prop="rank">
                    <el-input type="text" placeholder="请输入级别" v-model="row.rank"></el-input>
                </el-form-item>
                <el-form-item label="擅长" prop="expert">
                    <el-input type="textarea" v-model="row.expert" placeholder="请输入擅长内容"></el-input>
                </el-form-item>
                <el-form-item label="经验" prop="experience">
                    <el-input type="textarea" v-model="row.experience" placeholder="请输入擅长内容"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="deleted">
                    <el-select v-model="row.deleted" placeholder="请选择用户状态">
                        <el-option label="可用" :value="0"></el-option>
                        <el-option label="禁用" :value="1"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addClose">取 消</el-button>
                <el-button type="primary" @click="addConfirm">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 增加弹窗结束 -->
    </div>
</template>

<script>
import { baseURL } from "@/api/request";
import { isStrEmpty } from "@/utils/util";
export default {
    data() {
        return {
            //表格高度
            tableHeight: window.innerHeight - 320,
            //头像基地址
            baseURL: baseURL,
            //分页参数
            tableData: [],
            paginationData: {
                pageSize: 10,
                currentPage: 1,
                total: 50,
            },
            //查询参数
            name: "",
            code: "",
            deleted: -1,
            //修改或增加用到的的数据
            row: {},
            editDialogVisible: false,
            addDialogVisible: false,
            loading: false,
            rules: {
                name: [{ required: true, message: "请输入名称", trigger: "blur" }],
                deleted: [{ required: true, message: "请选择状态", trigger: "change" }],
            },
        };
    },
    methods: {
        handleSizeChange(val) {
            this.paginationData.pageSize = val;
            this.getPages();
        },
        handleCurrentChange(val) {
            this.paginationData.currentPage = val;
            this.getPages();
        },
        getPages() {
            //axios请求方式，通过this.request使用分装好的axios实例
            this.request
                .get("/doctor/getPage", {
                    params: {
                        name: this.name,
                        code: this.code,
                        deleted: this.deleted,
                        currentPage: this.paginationData.currentPage,
                        pageSize: this.paginationData.pageSize,
                    },
                })
                .then((res) => {
                    if (res.code == 200) {
                        this.tableData = res.data.records;
                        this.paginationData.total = res.data.total;
                        this.paginationData.currentPage = res.data.current;
                        this.paginationData.pageSize = res.data.size;
                    } else if (res.code == 204) {
                        this.tableData = []; // 清空表格数据
                        this.paginationData.total = 0; // 总记录数置为0
                        this.paginationData.currentPage = 1; // 当前页置为第一页
                        this.paginationData.pageSize = 10; // 每页大小置为默认值
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error",
                        });
                    }
                });
        },
        editOpen(row) {
            this.row = {
                id: row.id,
                uid: row.uid,
                code: row.code,
                phone: row.phone,
                name: row.name,
                entCode: row.entCode,
                photos: row.photos,
                rank: row.rank,
                expert: row.expert,
                experience: row.experience,
                sign: row.sign,
                deleted: row.deleted
            };
            this.editDialogVisible = true;
        },
        editClose() {
            this.$refs["editForm"].resetFields();
            this.resetRowParam();
            this.editDialogVisible = false;
        },
        editConfirm() {
            this.$refs["editForm"].validate((valid) => {
                if (valid) {
                    this.$alert("是否确定编辑", "提示", {
                        confirmButtonText: "确定",
                        callback: (action) => {
                            if (action == "confirm") {
                                this.loading = true;
                                this.request
                                    .post("/doctor/update", {
                                        id: this.row.id,
                                        uid: this.row.uid,
                                        code: this.row.code,
                                        phone: this.row.phone,
                                        name: this.row.name,
                                        entCode: this.row.entCode,
                                        photos: this.row.photos,
                                        rank: this.row.rank,
                                        expert: this.row.expert,
                                        experience: this.row.experience,
                                        sign: this.row.sign,
                                        deleted: this.row.deleted,
                                    })
                                    .then((res) => {
                                        if (res.code == 200) {
                                            this.$message({
                                                message: res.msg,
                                                type: "success",
                                            });
                                            this.editClose();
                                            this.getPages();
                                        } else {
                                            this.$message({
                                                message: res.msg,
                                                type: "error",
                                            });
                                        }
                                        this.loading = false;
                                    })
                                    .catch((err) => {
                                        this.loading = false;
                                    });
                            }
                        },
                    });
                } else {
                    this.$message({
                        message: "请先规范填写表单信息",
                        type: "warning",
                    });
                }
            });
        },
        addOpen() {
            this.resetRowParam();
            this.addDialogVisible = true;
        },
        addClose() {
            this.$refs["addForm"].resetFields();
            this.resetRowParam();
            this.addDialogVisible = false;
        },
        addConfirm() {
            this.$refs["addForm"].validate((valid) => {
                if (valid) {
                    this.$alert("是否确定新增", "提示", {
                        confirmButtonText: "确定",
                        callback: (action) => {
                            if (action == "confirm") {
                                this.loading = true;
                                this.request
                                    .post("/doctor/add", {
                                        uid: this.row.uid,
                                        code: this.row.code,
                                        phone: this.row.phone,
                                        name: this.row.name,
                                        entCode: this.row.entCode,
                                        photos: this.row.photos,
                                        rank: this.row.rank,
                                        expert: this.row.expert,
                                        experience: this.row.experience,
                                        sign: this.row.sign,
                                        deleted: this.row.deleted,
                                    })
                                    .then((res) => {
                                        if (res.code == 200) {
                                            this.$message({
                                                message: res.msg,
                                                type: "success",
                                            });
                                            this.addClose();
                                            this.getPages();
                                        } else {
                                            this.$message({
                                                message: res.msg,
                                                type: "error",
                                            });
                                        }
                                        this.loading = false;
                                    })
                                    .catch((err) => {
                                        this.loading = false;
                                    });
                            }
                        },
                    });
                } else {
                    this.$message({
                        message: "请先规范填写表单信息",
                        type: "warning",
                    });
                }
            });
        },
        deleteRow(row) {
            this.$alert("是否确定删除", "提示", {
                confirmButtonText: "确定",
                callback: (action) => {
                    if (action == "confirm") {
                        this.request
                            .post("/doctor/delete", {
                                id: row.id,
                            })
                            .then((res) => {
                                if (res.code == 200) {
                                    this.$message({
                                        message: res.msg,
                                        type: "success",
                                    });
                                    this.getPages();
                                } else {
                                    this.$message({
                                        message: res.msg,
                                        type: "error",
                                    });
                                }
                            });
                    }
                },
            });
        },
        deleteBatch() {
            var selectedList = this.$refs.multipleTable.selection;
            if (selectedList.length <= 0) {
                this.$message({
                    message: "请选择至少一条数据",
                    type: "warning",
                });
                return;
            }
            var ids = [];
            for (var i = 0; i < selectedList.length; i++) {
                ids.push(selectedList[i].id);
            }
            this.$alert("是否确定删除", "提示", {
                confirmButtonText: "确定",
                callback: (action) => {
                    //还没有做好判断 是否确定
                    if (action == "confirm") {
                        this.request
                            .post("/doctor/deleteBatch", {
                                ids: JSON.stringify(ids),
                            })
                            .then((res) => {
                                if (res.code == 200) {
                                    this.$message({
                                        message: res.msg,
                                        type: "success",
                                    });
                                    this.getPages();
                                } else {
                                    this.$message({
                                        message: res.msg,
                                        type: "error",
                                    });
                                }
                            });
                    }
                },
            });
        },
        isStrEmpty: function (str) {
            return isStrEmpty(str);
        },
        resetRowParam() {
            this.row = {
                id: '',
                uid: '',
                code: '',
                phone: '',
                name: '',
                entCode: '',
                photos: '',
                rank: '',
                expert: '',
                experience: '',
                sign: '',
                deleted: '',
            };
        }
    },
    mounted() {
        window.addEventListener("resize", () => {
            this.tableHeight = window.innerHeight - 320;
        });
    },
    created() {
        //创建
        this.getPages();
    },
};
</script>

<style scoped>
#body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#tableCrad {
    width: 100%;
}

#btnRow {
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

#pageDevice {
    text-align: right;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both;
}

.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    text-align: center;
    margin-bottom: 0;
    width: 24%;
}
</style>